<template>
  <div class="chart" style="height: 350px; width: 100%" />
</template>

<script>
import echarts from "echarts";
import { urlObj } from "@/api/login";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Object,
      default: {},
    },
    dataInput: {
      type: Array,
      default: [],
    },
    databutton: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chart: null,
      newminute: "", //当前时间
      oldminute: "", //2小时前
      socObj: [], //soc数据
      ahObj: [], //容量数据
      temObj: [], //温度数据
      newData: {
        xAxis: [],
        yAxis: [
          {
            name: "SOC",
            value: [],
          },
        ],
        yAxisName: "SOC(%)",
      },
      legendData: [],
      seriesData: [],
      colorArr: ["#8E35FF"],
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
    databutton: {
      deep: true,
      handler(val) {
        if (val) {
          //如果选中了日期选择，就会执行
          this.init();
          setTimeout(() => {
            this.databutton = false;
          }, 2000);
        }
      },
    },
  },
  created() {
    this.init(); //请求合集
  },
  mounted() {
    setTimeout(() => {
      this.$nextTick(() => {
        this.initChart();
      });
    }, 800);
    this.legendData = this.newData.yAxis.map((item) => item.name);

    this.seriesData = this.newData.yAxis.map((item1, index1) => {
      // item1.value = item1.value + "%";
      return {
        name: item1.name,
        type: "line",
        symbol: "circle",
        symbolSize: 6,
        itemStyle: {
          color: this.colorArr[index1],
        },
        lineStyle: {
          width: 4,
        },

        data: item1.value, // 折线图的数据
      };
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    // 请求合集
    init() {
      this.oldminute = this.dataInput[0];
      this.newminute = this.dataInput[1];
      // 获取soc、容量、温度数据:图表数据类型  POS：位置  SOC：电量 AH:容量  TEM：温度
      this.listData("SOC");
      setTimeout(() => {
        this.$nextTick(() => {
          this.initChart();
        });
      }, 1000);
      setTimeout(() => {
        this.$nextTick(() => {
          this.initChart();
        });
      }, 3000);
    },

    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        backgroundColor: "#fff",
        grid: {
          containLabel: true,
          bottom: "1%",
          top: "15%",
          left: "1%",
          right: "1%",
        },
        dataZoom: [
          {
            // 这是一个放大缩小的控制区域
            type: "inside", // 表示这是 slider 类型
            filterMode: "filter",
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{b0}<br />SOC: {c0}%",
        },
        legend: {
          top: "1%",
          right: "1%",
          data: this.legendData,
          itemGap: 10,
          textStyle: {
            fontSize: 11,
            color: "#888",
          },
        },
        xAxis: {
          triggerEvent: true,
          type: "category", //category  time  value
          data: this.newData.xAxis || [],
          min: this.newData.xAxis[0],
          max: this.newData.xAxis[this.newData.xAxis.length - 1],
          // maxInterval: 3600 * 24 * 1000,
          axisPointer: {
            //坐标轴指示器
            show: true,
            type: "line",
            lineStyle: {
              color: "#8E35FF",
            },
          },

          axisLabel: {
            //刻度设置
            interval: "auto",
            show: true,
            showMaxLabel: true,
            showMinLabel: true,
            verticalAlign: "top",
            fontSize: 11,
            color: "#888",
            rotate: 47,
            formatter: function (value) {
              let a = value.split("-");
              let b = value.split("-")[2].split(":");
              return a[1] + "-" + b[0] + ":" + b[1];
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              show: false,
              color: "#F3F3F3",
              width: 2,
            },
          },

          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: this.newData.yAxisName,
            type: "value",
            nameTextStyle: {
              color: "#888",
              fontSize: 11,
              padding: [0, 0, 0, 20],
            },
            splitNumber: 5,
            axisLabel: {
              show: true,
              fontSize: 11,
              color: "#888",
              // formatter: function (value) {
              //   return value + "%";
              // },
            },

            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#aaa",
                type: "dotted",
              },
            },
          },
        ],
        series: this.seriesData,
      });
    },

    // 获取soc、容量、温度数据
    listData(type) {
      let prarms = {
        func: "getChart",
        token: JSON.parse(sessionStorage.getItem("userObj")).token || "",
        business: {
          chart_type: type || "", //图表数据类型  POS：位置  SOC：电量 AH:容量  TEM：温度
          s_time: this.oldminute || "", //开始时间
          e_time: this.newminute || "", //结止时间
          battery_id: this.chartData.id || "", //电池编号
          density: 0, //数据间隔 0：5分 1：10分 以此类推},    num <= 4 ? 0 : a
        },
      };
      urlObj(prarms).then((res) => {
        let obj = res.result || [];

        this.newData.xAxis = [];
        if (obj.length !== 0) {
          obj.forEach((item) => {
            this.newData.xAxis.push(item.update_time);
          });
        }
        if (type == "SOC") {
          this.socObj = obj;
          if (this.socObj.length !== 0) {
            this.socObj.forEach((item) => {
              let s = item.soc;
              this.newData.yAxis[0].value.push(s);
            });
          }
        }
      });
    },
  },
};
</script>
